<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-curent-row
    >
      <el-table-column align="center" label="ID" min-width="10%">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="设备号" min-width="30%">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" min-width="30%">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" min-width="30%">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a :href="scope.row.snap" target="_blank" title="查看最大化图片"><img :src="scope.row.snap" class="max"></a>
            <img slot="reference" :src="scope.row.snap" class="thumb">

          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="30%">
        <template slot-scope="scope">
          <el-button type="success" class="el-icon-video-play" size="mini" @click="video(scope.row.hls, scope.row)">播放视频</el-button>
          <el-button type="default" class="el-icon-picture" size="mini" @click="timing(scope.row)">定时截图</el-button>
          <el-button type="default" class="el-icon-warning" size="mini" @click="alerts(scope.row)">报警记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <preview-dialog :show.sync="previewShow" :camera.sync="viewItem" />
  </div>
</template>

<script>
import { list } from '@/api/channel'
import previewDialog from './previewDialog.vue'

export default {
  components: {
    previewDialog
  },
  data() {
    return {
      previewShow: false,
      list: null,
      listLoading: true,
      viewItem: {
        'rtmp': [''], 'hls': [''], 'flv': ['']
      }
    }
  },

  created() {
    const account = this.$route.query.account
    this.fetchData(account)
  },
  methods: {
    fetchData(account) {
      this.listLoading = true
      list({ account: account }).then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    video(hls, item) {
      this.viewItem = item
      this.previewShow = true
    },
    timing(item){
      console.info('timing',item)
      this.$router.push({ path: '/device/timing', query: { deviceid: item.parentid, channelid:item.deviceid }})
    },
    alerts(item){
      console.info('alerts',item)
      this.$router.push({ path: '/device/alerts', query: { deviceid: item.parentid, channelid:item.deviceid}})
    }
  }
}
</script>

<style>

  .thumb{
    max-width:6rem;
    max-height:6rem;
    cursor: pointer;
  }
  .max{
    max-width:24rem;
    max-height:24rem;

  }
  .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
</style>
